<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入ElementUI样式 -->
    <link type="text/css" rel="stylesheet" href="./css/index.css">
    <!-- 引入Vue组件库 -->
    <script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <el-card class="box-card">
        <el-descriptions title="用户信息" :column="3">
            <el-descriptions-item label="证件照">
                <img :src="loginAdmin.hardUrl" height="100px" width="75px"/>
            </el-descriptions-item>
            <el-descriptions-item label="员工名称">{{loginAdmin.name}}</el-descriptions-item>
            <el-descriptions-item label="员工工号">{{loginAdmin.account}}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{loginAdmin.phone}}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{loginAdmin.age}}</el-descriptions-item>
            <el-descriptions-item label="入职时间">{{loginAdmin.createTime}}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{loginAdmin.idCard}}</el-descriptions-item>
            <el-descriptions-item label="生日">{{loginAdmin.birthday}}</el-descriptions-item>
            <el-descriptions-item label="备注">
                <el-tag type="warning" size="mini" effect="dark" v-if="loginAdmin.status==0">在职</el-tag>
                <el-tag type="info" effect="dark" size="mini" v-if="loginAdmin.status==1">离职</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="学位信息">{{loginAdmin.education}}</el-descriptions-item>
            <el-descriptions-item label="专攻方向">{{loginAdmin.major}}</el-descriptions-item>
            <el-descriptions-item label="功能">
                <el-button type="success"  size="mini" @click="addEmp" >修改个人信息</el-button>
            </el-descriptions-item>
        </el-descriptions>
        <div class="text item">
            <el-collapse @change="handleChange" accordion>
                <el-collapse-item title="详细信息" name="1">
                    <div>{{loginAdmin.introduction}}</div>
                </el-collapse-item>
                <el-collapse-item title="个人信息" name="2">
                    <div>{{loginAdmin.prize}}</div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </el-card>

</div>


<script>
    new Vue({
        el: "#app",
        data: {
            loginAdmin:{},
        },
        created() {
            this.initUser();
        },
        methods: {
            //初始化用户信息
            initUser(){
                axios.get("/login/loginAdmin").then(result=>{
                    if(result.data.code === 200){
                        this.loginAdmin = result.data.data;
                    }
                })
            },

            addEmp(){
                window.parent.iframeFunction('/updataEmp.html','修改个人信息');
            },

            handleChange(val) {
                console.log(val);
            },
        },
    })
</script>


<style>
    #app{
        border: 1px solid #DCDFE6;
        width: 800px;
        margin: 30px auto;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 800px;
    }
</style>
</body>
</html>